<template>
  <div id="app">
    <h1>父组件</h1>
    <h1>{{msg}}</h1>
    <!-- <ul>
      <li v-for="item in lists" :key="item.id">{{item.id}}----{{item.title}}</li>
    </ul>-->
    <hr />
    <!-- 需求：将父组件中的lists传递到子组件 -->
    <!-- <CartoonList v-bind:lists="lists" title="天庆爱看奥特曼" /> -->
    <CartoonList :lists="lists" title="天庆爱看奥特曼" />
  </div>
</template>

<script>
import CartoonList from "./components/CartoonList";
// 组件传值  props传值 父传子  只能是父传子
export default {
  name: "App",
  data() {
    return {
      msg: "动画片",
      lists: [
        {
          id: 1,
          title: "迪迦奥特曼",
          detail: {
            name1: "迪迦",
            name2: "怪兽1",
            name3: "怪兽2"
          }
        },
        {
          id: 2,
          title: "海底小纵队"
        },
        {
          id: 3,
          title: "小猪佩奇"
        }
      ]
    };
  },
  // 注册组件
  components: {
    CartoonList
  }
};
</script>

<style>
</style>
